<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel='shortcut icon' href='favicon.ico'>
<title>Blockstrap | Widgets</title>
    
<link rel='stylesheet' href='blockstrap/css/bs-page.css' type='text/css' media='all' />
<link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
    
<link href="blockstrap/css/bootstrap.css" rel="stylesheet">
<link href="blockstrap/css/widgets.css" rel="stylesheet">
    
</head>
<body>

<div id="header">
    <div class="container">
        <h1 class="logo">Blockstrap</h1>
        <ul class="nav">
            <li><a href="http://blockstrap.com">Framework</a></li>
            <li><a href="http://github.com/blockstrap/framework/tree/master/docs/en" target="_blank">Documentation</a></li>
            <li><a href="http://github.com/blockstrap/" target="_blank">Source-Code</a></li>
            <li><a href="http://neuroware.io">pro services</a></li>
            <li><a href="#" class="btn">widgets</a></li>
        </ul>
    </div>
</div>
    
<div id="sub-header">
    <div class="container">
        <h2 class="tagline">example widgets - included just for tom</h2>
        <a href="https://github.com/blockstrap/framework/archive/gh-pages.zip" class="btn primary">
            Download
            <br />
            <span>Full Framework / Version 0.8.0.1</span>
        </a>
        <a href="/framework/demo/" class="btn" target="_blank">
            Live Demo
            <br />
            <span>The Default HTML5 Web Wallet</span>
        </a>
    </div>
</div>

<div class="container">
    
    <ul class="features">
        <li>
            <span class="icon icon-keys"></span>
            <h3 class="tagline">KEY GENERATION</h3>
            <p class="description">(click button below to open a key-generator)</p>
            <hr />
            <script src="blockstrap/js/widget.js"
            
                data-type="btn-generate"
                data-chain="btc"
                data-salt="unique-bs-widget-salt-001"
            
            >GENERATE KEYS</script>
            <hr />
            <p>Simply add the <code>bs-generate</code> class to any element on pages with the blockstrap <code><a href="#">widgets</a></code> module activated</p>
            <hr />
            <a href="#" class="btn btn-default btn-block" target="_blank">READ DOCUMENTATION</a>
            <hr />
            <p class="description">Or embed by copy and pasting the following <strong>default</strong> code directly into the HTML where you would like the button to appear for it to be automatically generated</p>
            <hr />
            <p><pre style="text-align:left;">
&lt;script

  src="/blockstrap/js/widget.js" 
  data-type="btn-generate"
  data-chain="btc"
  data-salt="ADD_SALT_HERE"
    
&gt;&lt;/script&gt;
</pre></p>
        </li>
        <li>
            <span class="icon icon-plugins"></span>
            <h3 class="tagline">DONATIONS</h3>
            <p class="description">(click button to open a donation window)</p>
            <hr />
            <script src="blockstrap/js/widget.js"
            
                data-type="btn-donate"
                data-chain="btc"
                data-address="1GjHvbkCyYpy3uaNPvHsxe2EptH2RxEvMt"
            
            >DEFAULT DONATE</script> 
            <script src="blockstrap/js/widget.js"
                    
                data-type="btn-donate"
                data-chain="doge"
                data-address="DEHfgFYKL97gFFoYHM7UejXBGKjLFzD4za"
               
                data-bip="false" 
                data-qr="false" 
                data-txs="true" 
                data-balance="true" 
                data-group="donate" 
                data-amount="123" 
                data-label="Donation via Blockstrap Widget" 
                data-loading="Fetching"
                data-html="<p><a href='#' class='btn btn-default btn-bs-widget bs-qr' data-content='dogecoin:DEHfgFYKL97gFFoYHM7UejXBGKjLFzD4za?amount=123.00000000'>PAYMENT REQUEST QR</a> <a href='#' class='btn btn-primary btn-bs-widget bs-qr' data-content='DEHfgFYKL97gFFoYHM7UejXBGKjLFzD4za'>ADDRESS QR</a> <a href='dogecoin:DEHfgFYKL97gFFoYHM7UejXBGKjLFzD4za?amount=123.00000000' target='_blank' class='btn btn-default btn-bs-widget'>PAYMENT REQUEST URL</a></p><p>(and thank you for your very specific donation)</p>"
            
            >CUSTOM DONATE</script>
            <hr />
            <p>Simply add the <code>bs-donate</code> class to any element on pages with the blockstrap <code><a href="#">widgets</a></code> module activated</p>
            <hr />
            <a href="#" class="btn btn-default btn-block" target="_blank">READ DOCUMENTATION</a>
            <hr />
            <span class="alert alert-info alert-block">
                <p style="line-height: 40px"><strong>Optional Inegrated Dynamic Labels:</strong></p>
                <span class="badge bs">
                    Current Balance: <strong class="donate-balance-DEHfgFYKL97gFFoYHM7UejXBGKjLFzD4za">0.00000000</strong> 
                    | 
                    Total Donations: <strong class="donate-txs-DEHfgFYKL97gFFoYHM7UejXBGKjLFzD4za">0</strong><br /> 
                    Total Received to Date: <strong class="donate-received-DEHfgFYKL97gFFoYHM7UejXBGKjLFzD4za">0</strong>
                </span>
            </span>
            <hr />
            <p class="description">Or embed by copy and pasting the following <strong>default</strong> code directly into the HTML where you would like the button to appear for it to be automatically generated</p>
            <hr />
            <p><pre style="text-align:left;">
&lt;script

  src="/blockstrap/js/widget.js" 
  data-type="btn-donate"
  data-chain="btc"
  data-address="ADD_ADDRESS_HERE"
    
&gt;&lt;/script&gt;
</pre></p>
        </li>
        <li>
            <span class="icon icon-accounts"></span>
            <h3 class="tagline">ACCOUNTS</h3>
            <p class="description">(click button to open accounts window)</p>
            <hr />
            <script src="blockstrap/js/widget.js"
            
                data-type="btn-accounts_modal"
                data-salt="unique-bs-widget-salt-001"
            
            >CHECK ACCOUNTS</script>
            <hr />
            <p>Simply add the <code>bs-accounts</code> class to any element on pages with the blockstrap <code><a href="#">widgets</a></code> module activated</p>
            <hr />
            <a href="#" class="btn btn-default btn-block" target="_blank">READ DOCUMENTATION</a>
            <hr />
            <p class="description">Or embed by copy and pasting the following <strong>default</strong> code directly into the HTML where you would like the button to appear for it to be automatically generated</p>
            <hr />
            <p><pre style="text-align:left;">
&lt;script

  src="/blockstrap/js/widget.js" 
  data-type="btn-accounts_modal"
  data-salt="ADD_SALT_HERE"
    
&gt;&lt;/script&gt;
</pre></p>
        </li>
    </ul>

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <hr />
    <p>&nbsp;</p>
    <p>&nbsp;</p>

    <span class="alert alert-block alert-warning">
        <strong>UPDATING API CONFIGURATION AND SWITCHING WIDGET OPTIONS</strong>
    </span>
    <span class="alert alert-block alert-info">
        select from the <strong>nine available</strong> API providers below and add an API key if, when or where required
        <hr />
        <form class="bs-update-api">
            <div class="row">
                <div class="col-sm-4">
                    <select class="form-control" id="api-provider" autocomplete="off">
                        <option value="">-- Select API Provider --</option>
                        <option value="bcinfo">Blockchain.info (1 Chain)</option>
                        <option value="blockcypher">BlockCypher (3 Chains)</option>
                        <option value="blockr">BlockR (4 Chains)</option>
                        <option value="blocktrail">BlockTrail (2 Chains)</option>
                        <option value="insights">Insights (2 Chains)</option>
                        <option value="qt">Local QTs (8 Chains)</option>
                        <option value="sochain">SoChain (6 Chains)</option>
                        <option value="spinal">Spinal (10 Chains)</option>
                        <option value="toshi">Toshi (2 Chains)</option>
                    </select>
                    <hr />
                </div>
                <div class="col-sm-5">
                    <input type="text" class="form-control" placeholder="Add Optional API Key" id="api-key" autocomplete="off" />    
                    <hr />
                </div>
                <div class="col-sm-3">
                    <button type="submit" id="api-submit" class="btn btn-primary btn-block">Update API</button>
                    <hr />
                </div>
            </div>
        </form>
        otherwise the <code>default_api</code> and <code>default_key</code> from the merged blockstrap options will be used
    </span>
    
</div>  
<div id="footer">
    <div class="container">
        <ul class="social">
            <li class="twitter">
                <a href="http://twitter.com/blockstrap" target="_blank">Twitter</a>
            </li>
            <li class="github">
                <a href="http://github.com/blockstrap" target="_blank">GitHub</a>
            </li>
            <li class="form">
                <form 
                    class="subscribe" 
                    method="post" 
                    action="http://neuroware.us8.list-manage1.com/subscribe?u=510ca926990f2cef070cbe3d2&id=0856d2bdac"
                >
                    <input type="text" name="EMAIL" class="email" placeholder="Signup to the developer mailing list..."/>
                    <button type="submit" class="submit">SIGNUP</button>
                </form>
            </li>
        </ul>
    </div>
</div>

<!-- MODAL -->
<div id="default-modal" class="modal fade" style="display: none;" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button">
                    <span aria-hidden="true">×</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body no-footer"></div>
        </div>
    </div>
</div>

</body>
</html>